<template>
	<DialogBox v-model:visible="drawerVisible" :title="`${drawerProps.title}菜单`">
		<el-form
			v-if="drawerVisible"
			ref="ruleFormRef"
			label-width="100px"
			label-suffix=" :"
			:rules="rules"
			:disabled="drawerProps.isView"
			:model="drawerProps.rowData"
			:hide-required-asterisk="drawerProps.isView"
		>
			<el-form-item label="菜单类型" prop="type">
				<el-radio-group style="width: 100%" v-model="drawerProps.rowData!.type">
					<el-radio-button label="menu" value="menu">菜单</el-radio-button>
					<el-radio-button label="btn" value="btn">按钮</el-radio-button>
					<el-radio-button label="operate" value="operate">操作</el-radio-button>
					<el-radio-button label="batch" value="batch">导入/导出</el-radio-button>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="菜单名称" prop="menuName">
				<el-input v-model="drawerProps.rowData!.menuName" />
			</el-form-item>
			<el-form-item label="图标信息" prop="icon">
				<el-popover :show-after="500" placement="bottom-start" :width="540" trigger="click">
					<template #reference>
						<el-input
							class="icon-input"
							v-model="drawerProps.rowData!.icon"
							placeholder="点击选择图标"
							@click="showSelectIcon"
							readonly
						>
							<template #prefix>
								<i :class="`curr-icon iconfont ${drawerProps.rowData!.icon}`" />
							</template>
						</el-input>
					</template>
					<icon-select ref="iconSelectRef" @selected="selected" />
				</el-popover>
			</el-form-item>
			<el-form-item label="访问路径" prop="path">
				<el-input v-model="drawerProps.rowData!.path" />
			</el-form-item>
			<el-form-item label="渲染页面" prop="component">
				<el-input v-model="drawerProps.rowData!.component" />
			</el-form-item>
			<el-form-item label="启用状态" prop="enable">
				<el-switch v-model="drawerProps.rowData!.enable" active-value="1" inactive-value="0"></el-switch>
			</el-form-item>
			<el-form-item label="所属模块" prop="parentId">
				<el-tree-select
					v-model="drawerProps.rowData!.parentId"
					:data="menuList"
					check-strictly
					placeholder="选择上级模块"
					clearable
					class="w-full"
				/>
			</el-form-item>
			<el-form-item label="排序信息" prop="orderNum">
				<el-input-number v-model="drawerProps.rowData!.orderNum" style="width: 100%" />
			</el-form-item>
			<el-form-item label="扩展参数" prop="perms">
				<el-input v-model="drawerProps.rowData!.perms">
					<!-- <template #suffix>
						<el-tooltip>
							<i class="iconfont iconhelp-circle" />
							<template #content>
								<div>hideFoldTree:true=不显示分组树</div>
								<div>deptAndStationTree:true=显示分组与测站树</div>
							</template>
						</el-tooltip>
					</template> -->
				</el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="drawerVisible = false">取消</el-button>
			<el-button type="primary" v-show="!drawerProps.isView" @click="handleSubmit">确定</el-button>
		</template>
	</DialogBox>
</template>

<script setup lang="ts" name="UserDrawer">
import { getAuthMenuListApi } from "@/api/modules/login";
import DialogBox from "@/components/DialogBox";
import IconSelect from "@/components/IconSelect/index.vue";
import { MessageType } from "@/enums/messageEnum";
import { GlobalStore } from "@/stores";
import { getTreeList } from "@/utils/treeUtil";
import { showMsg, showTips } from "@/utils/util";
import { FormInstance } from "element-plus";
import { reactive, ref } from "vue";
import { MenuModel } from "../interface";

const rules = reactive({
	type: [{ required: true, message: "请选择类型" }],
	menuName: [{ required: true, message: "名称不能为空" }],
	path: [{ required: true, message: "路径不能为空" }],
	component: [{ required: true, message: "组件不能为空" }]
});
interface DrawerProps {
	title: string;
	isView: boolean;
	rowData?: MenuModel;
	api?: (params: any) => Promise<any>;
	getTableList?: () => Promise<any>;
}

// drawer框状态
const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
	isView: false,
	title: ""
});

// 接收父组件传过来的参数
const acceptParams = async (params: DrawerProps): Promise<void> => {
	drawerProps.value = params;
	if (params.title == "新增") {
		drawerProps.value.rowData!.type = "menu";
		drawerProps.value.rowData!.enable = "1";
		drawerProps.value.rowData!.orderNum = 100;
	} else {
		drawerProps.value.rowData!.type = drawerProps.value.rowData!.type.trim();
	}
	await getMenuList();
	drawerVisible.value = true;
};
// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
	if (drawerProps.value.rowData?.id && drawerProps.value.rowData?.parentId == drawerProps.value.rowData?.id) {
		showMsg("父节点不能选择为当前节点", MessageType.warning);
		return;
	}
	ruleFormRef.value!.validate(async valid => {
		if (!valid) return;
		try {
			let { code } = await drawerProps.value.api!(drawerProps.value.rowData);
			let ok = showTips(code, drawerProps.value.rowData?.id ? "修改菜单" : "添加菜单");
			// ElMessage.success({ message: `${drawerProps.value.title}用户成功！` });
			if (ok) {
				drawerProps.value.getTableList!();
				drawerVisible.value = false;
			}
		} catch (error) {
			console.log(error);
		}
	});
};

//获取角色菜单权限
const menuList = ref<any>();
const getMenuList = async () => {
	if (drawerProps.value.rowData) {
		const { userInfo } = GlobalStore();
		let { result } = await getAuthMenuListApi(userInfo.username);
		menuList.value = getTreeList(result.records.children, "id", "menuName");
	}
};
const showChooseIcon = ref<boolean>(false);
const iconSelectRef = ref<any>(null);
/** 展示下拉图标 */
const showSelectIcon = () => {
	showChooseIcon.value = !showChooseIcon.value;
	if (showChooseIcon.value) {
		iconSelectRef.value.reset();
	}
};
/** 选择图标 */
const selected = (name: string) => {
	drawerProps.value.rowData!.icon = name;
	showChooseIcon.value = false;
	(document.querySelector(".icon-input") as HTMLElement).dispatchEvent(new MouseEvent("click"));
};

defineExpose({
	acceptParams
});
</script>
